<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path=request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ACCOUNT</title>
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>/js/easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>/js/easyui/themes/icon.css">
<script type="text/javascript"
	src="<%=basePath%>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
	src="<%=basePath%>/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="<%=basePath%>/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript"
	src="<%=basePath%>/js/easyui/plugins/jquery.datagrid.js"></script>
<style type="text/css">
/*input高亮显示*/
input[type=text],textarea {
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;
	padding: 3px 0px 3px 3px;
	margin: 5px 1px 3px 0px;
	border: 1px solid #DDDDDD;
}

input[type=text]:focus,textarea:focus {
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	padding: 3px 0px 3px 3px;
	margin: 5px 1px 3px 0px;
	border: 1px solid rgba(81, 203, 238, 1); //
	background: #E6E6FA;
}

.onSuccess {
	background: url(images/img/ok.gif) no-repeat 0 center;
	padding-left: 10px;
}

.high {
	color: red;
}

.ftitle {
	font-size: 14px;
	font-weight: bold;
	padding: 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

#dlg table {
	font-size: 12px; //
	table-layout: fixed;
	empty-cells: show;
	border-collapse: collapse;
	margin: 0 auto;
}

#dlg td {
	height: 20px;
}

#dlg h1,h2,h3 {
	font-size: 12px;
	margin: 0;
	padding: 0;
}

//
样式一
		#dlg table.tab_css_1 {
	border: 1px solid #cad9ea;
	color: #666;
}

#dlg table.tab_css_1 th {
	background-image: url(images/th_bg1.gif);
	background-repeat: :repeat-x;
	height: 25px;
}

#dlg table.tab_css_1 td,table.tab_css_1 th {
	border: 1px solid #cad9ea;
	padding: 0 1em 0;
}

#dlg table.tab_css_1 tr.tr_css {
	background-color: #f5fafe;
}
</style>
<script type="text/javascript">
		function formatColumn(value,row,index) {
			var str='';
			$.each(value,function(i,v){
				if(v.rolename=='超级管理员'){
					str+='<span style="color:red;">'+v.rolename+'</span>';
				}else{
					str+=v.rolename;
				}
				str+=";";
			});
			return str.substring(0,str.length-1);
		}
	
		$.ajaxSetup ({
			cache:false //关闭AJAX相应的缓存
		});
		$(function(){
			//如果是必填的，则加红星标识.
			$("form :input.required").each(function(){
				var $required = $("<span class='high'>*</span>"); //创建元素
				//$(this).parent().prev().append($required); //然后将它追加到文档中
				$parent=$(this).parent();
				$parent.prev().append($required);
			});
		});
		//查询、添加、修改、删除
		function query(){
		   $('#mydatagrid').datagrid('load',{
			   accName:$("#accName").val()
		   });
	   }
		
		var url;
		var checkName=false;
		
		function newDialog(){
			$('#dlg').dialog('open').dialog('setTitle','添加账号');
			$('div.ftitle').html("添加账号");
			$('#fm').form('clear');
			$("form :input.required").each(function(){ //注意form后面空格
				$parent=$(this).parent();
				$parent.find(".onSuccess").remove();
			});
			checkName=false;
			checkFloorcount=false;
			$('#tipMsg').text("");
			$('#btn1').linkbutton({//创建linkbutton
			    iconCls:'icon-ok',
			    text:'保存'
			});
			url='<%=basePath%>/account/add.action';
		}
		
		 function editor(){
				var row=$('#mydatagrid').datagrid("getSelected");
				if(row){
					$('#dlg').dialog('open').dialog('setTitle','修改账号');
					$('div.ftitle').html("修改账号");
					$('#fm').form('load',row);
					$("input[type='checkbox']").each(function() {
						$(this).attr("checked", false); 
					});				
					url="<%=basePath%>/account/getCheckedRoleIdsByAccId/"+row.accId+".action";
					$.get(url, function(data,status){
						eval(data);
					});
					$('#btn1').linkbutton({//创建linkbutton
					    iconCls:'icon-ok',
					    text:'修改'
					});
					url='<%=basePath%>/account/update.action';
				}else{
					$.messager.show({
						   title:'提示信息',
						   msg:'请选择需修改项！！！'
					});
				}
			}
			
		function dbClickRow(rowIndex,rowData){
			$('#dlg').dialog('open').dialog('setTitle','修改账号');
			$('div.ftitle').html("修改账号");
			$('#fm').form('load',rowData);
			$("input[type='checkbox']").each(function() {
				$(this).attr("checked", false); 
			});				
			var url="<%=basePath%>/account/getCheckedRoleIdsByAccId/"+rowData.accId+".action";
			$.get(url, function(data,status){
				eval(data);
			});
			//$("form :input[type=checkbox][name='roles'][value=4]").attr("checked",true);
			$('#btn1').linkbutton({//创建linkbutton
			    iconCls:'icon-ok',
			    text:'修改'
			});
			url='<%=basePath%>/account/update.action';
		}
	  	 
		function save(){
			$('#fm').form('submit',{
				url:url,
				onSubmit:function(){
					showProcess(true,'温馨提示','正在提交数据...');  //添加进度条可以防重复提交
				},
				success:function(result){
					showProcess(false);
					var result = eval('('+result+')');
                    if (result.errorMsg){
                        $.messager.show({
                            title:'提示信息',
                            msg:result.errorMsg
                        });
                    } else {
                        $('#dlg').dialog('close');        // close the dialog
                        $('#mydatagrid').datagrid('reload');    // reload the user data
                    }
				},
				onLoadError:function(){
		             showProcess(false);
		             $.messager.alert('温馨提示','由于网络或服务器太忙，提交失败，请重试！');
		         }
			});
		}
		//进度框
		function showProcess(isShow,title,msg){
			if(!isShow){
				$.messager.progress('close');
				return;
			}
			var win=$.messager.progress({
				title:title,
				msg:msg
			});
		}
		
		function del(){
			   var row=$('#mydatagrid').datagrid("getSelected");
			   if(row){
				   $.messager.confirm('消息','您确定要删除账号\''+row.accId+'\'吗?',function(r) {
						if (r) {
							$.ajax({
								url:'<%=basePath%>/account/del/'+row.accId+".action",
								type:'post',
								timeout:5000,
								success:function(data) {
									$.messager.alert('消息',data);
									$('#mydatagrid').datagrid('reload');
								}
							});
						} 
					});
			   }else{
				   $.messager.show({
					   title:'提示信息',
					   msg:'请选择一项要删除的内容！！！'
				   });
			   }
		}
	</script>
</head>
<body>
	<div id="main-frame">
		<div id="search-content" style="float: left; margin-bottom: 10px;">
			<div id="serar-panel" class="easyui-panel"
				style="width: 1060px; height: auto; padding: 3px;" title="查询"
				data-options="iconCls:'icon-search',collapsible:true,
				 pagination:true,
				 loadMsg:'正在加载服务器信息...'">
				<table>
					<tr>
						<td>账号名称</td>
						<td><input id="accName" style="width: 120px"></td>
						<td><a href="javascript:void(0);" class="easyui-linkbutton"
							data-options="iconCls:'icon-search'" onclick="query();">查询</a></td>
					</tr>
				</table>
			</div>
		</div>
		<div id="molitor-data-content" style="float: left;">
			<table id="mydatagrid" class="easyui-datagrid" title="账号管理信息"
				style="width: 1060px; height: 480px"
				data-options="singleSelect:true,
	            url:'<%=basePath%>/account/getPageList.action',
	            toolbar:'#toolbar',
	            collapsible:true,
	            rownumbers:false,
	            fitColumns:true,
	            noheader:false, //Defines if to show panel border.
	            loadMsg:'正在获取数据...',
	            pagination:true,
	            onDblClickRow:function(rowIndex,rowData){return dbClickRow(rowIndex,rowData)},
	            idField:'accCode'">
				<thead>
					<tr>
						<th data-options="field:'accId',width:100,sortable:true">ID</th>
						<th data-options="field:'accCode',width:100,sortable:true">账号编码</th>
						<th data-options="field:'accName',width:120,sortable:true">账号名称</th>
						<!-- <th data-options="field:'roles',width:120,sortable:false" formatter="(function(v,r,i){return formatColumn(v,r,i);})">角色名称</th>-->
					</tr>
				</thead>
			</table>
			<div id="toolbar">
				<a href="javascript:void(0)" class="easyui-linkbutton"
					iconCls="icon-add" plain="true" onclick="newDialog()">添加</a> <a
					href="javascript:void(0)" class="easyui-linkbutton"
					iconCls="icon-edit" plain="true" onclick="editor()">修改</a> <a
					href="javascript:void(0)" class="easyui-linkbutton"
					iconCls="icon-remove" plain="true" onclick="del()">删除</a>
			</div>
			<!-- 添加面板区域 -->
			<div id="dlg" class="easyui-dialog" title="添加账号"
				style="width: 650px; height: 350px; padding: 10px 10px"
				data-options="iconCls:'icon-save',closed:true,modal:true,buttons:'#dlg-buttons',cache:false">
				<form:form id="fm" action="" method="post" commandName="account">
					<form:hidden path="accId" />
					<div class="ftitle" style="text-align: center">添加账号</div>
					<table id="mytab" style="width: 610px" border="0" class="tab_css_1">
						<tr>
							<td><form:label path="accCode">账号编码</form:label></td>
							<td><form:input path="accCode" class="required" /></td>
							<td>&nbsp;</td>
							<td><form:label path="accName">账号名称</form:label></td>
							<td><form:input path="accName" class="required" /></td>
						</tr>
						<tr class="tr_css">
							<td colspan="5"></td>
						</tr>
						<tr>
							<td colspan="5" align="center"><c:if
									test="${!empty roleList}">
									<table id="mytab" width="98%" style="margin: 10px 0px"
										border="1" class="tab_css_1">
										<caption>
											<h2>账号角色选择</h2>
										</caption>
										<tr>
											<th width="10"></th>
											<th>角色编号</th>
											<th>角色名称</th>
										</tr>
										<c:forEach items="${roleList}" var="role" varStatus="status">
											<tr <c:if test="${status.count%2==0}">class="tr_css"</c:if>>
												<td><form:checkbox path="roles" value="${role.roleId}" /></td>
												<td width="100px">${role.rolecode}</td>
												<td width="250px">${role.rolename}</td>
											</tr>
										</c:forEach>
									</table>
								</c:if></td>
						</tr>
					</table>
				</form:form>
			</div>
			<div id="dlg-buttons">
				<a href="javascript:void(0)" class="easyui-linkbutton"
					iconCls="icon-ok" onclick="save()" id="btn1">保存</a> <a
					href="javascript:void(0)" class="easyui-linkbutton"
					iconCls="icon-cancel"
					onclick="javascript:$('#dlg').dialog('close')">取消</a>
			</div>
		</div>
	</div>
</body>
</html>